<template>
  <span :class="['order-status', status]">{{ text }}</span>
</template>

<script>
export default {
  props: {
    status: {
      type: String,
      required: true,
      validator: e => ['success', 'closed', 'pending'].includes(e)
    },

    text: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="less" scoped>
.order-status {
  font-size: 13px;
}

.success {
  color: #4586FF;
}

.closed {
  color: #999999;
}

.pending {
  color: #FF6669;
}
</style>